<template>
  <div class="App">
    <table>
      <thead>
        <tr>
          <th>欢迎光临——vue开发的收银系统-水果店</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>苹果10斤￥/斤，折扣 ‘8折’</th>
        </tr>
        <tr>
          <td>
            请输入你要购买的斤数
            <input type="text" ref="inp" v-model.number="name" />
          </td>
        </tr>
        <tr>
          <td>
            <button @click="getSum">结束买单</button>
          </td>
        </tr>
        <tr>
          <td>
            结账：总价：{{ sum }} ￥元 折后价：{{ parseInt(sum * 0.8) }}￥元省了：{{ parseInt(sum - sum * 0.8) }}￥元
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 0,
      name: ''
    }
  },
  methods: {
    getSum() {
      if (this.$refs.inp.value == '' || isNaN(this.$refs.inp.value)) {
        this.$refs.inp.value = ''
        alert('请输入正确的价格')
        return
      }
      this.sum = this.name
    }
  }
}
</script>

<style>
.App {
  width: 1000px;
  margin: auto 0;
}
th {
  border: 1px solid #333;
  line-height: 40px;
}
tr {
  text-align: center;
  font-size: 20px;
}
td {
  width: 1000px;
  border: 1px solid #333;
  line-height: 40px;
}
</style>
